<script setup>
import {useLanguageStore} from '@/stores/language';
import {useThemeStore} from '@/stores/theme';
import {ref, onMounted} from 'vue';

const language = useLanguageStore();
const theme = useThemeStore();
const selectedLanguage = ref('zh')
const selectedTheme = ref(false)

onMounted(() => {
  selectedLanguage.value = language.currentLang
  selectedTheme.value = theme.isDark === true ? "dark" : "light"
})
const handleLangChange = () => {
  language.switchLanguage(selectedLanguage.value)
}
const handleThemeChange = () => {
  theme.setTheme(selectedTheme.value)
}
</script>

<template>
  <div class="settings-content">
    <div class="content-header">
      <h2>{{ $t("setting1") }}</h2>
      <p>{{ $t("generalSettingsDescription") }}</p>
    </div>

    <div class="settings-card">
      <h3><i class="fas fa-globe"></i>{{ $t("languageAndRegion") }}</h3>
      <div class="setting-item">
        <div class="setting-info">
          <h4>{{ $t("systemLanguage") }}</h4>
          <p>{{ $t("selectPreferredLanguage") }}</p>
        </div>
        <div class="custom-select-wrapper">
          <select class="custom-select" v-model="selectedLanguage" @change="handleLangChange">
            <option value="zh">简体中文</option>
            <option value="en">English</option>
          </select>
          <i class="fas fa-chevron-down select-arrow"></i>
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-info">
          <h4>{{ $t("systemTheme") }}</h4>
          <p>{{ $t("selectPreferredTheme") }}</p>
        </div>
        <div class="custom-select-wrapper">
          <select class="custom-select" v-model="selectedTheme" @change="handleThemeChange">
            <option value="light">{{ $t("lightTheme") }}</option>
            <option value="dark">{{ $t("darkTheme") }}</option>
          </select>
          <i class="fas fa-chevron-down select-arrow"></i>
        </div>
      </div>
    </div>

    <div class="settings-card">
      <h3><i class="fas fa-bell"></i>{{ $t("notificationSettings") }}</h3>
      <div class="setting-item">
        <div class="setting-info">
          <h4>{{ $t("smsNotification") }}</h4>
          <p>{{ $t("receiveSystemUpdates") }}</p>
        </div>
        <label class="switch">
          <input type="checkbox" checked>
          <span class="slider"></span>
        </label>
      </div>
      <div class="setting-item">
        <div class="setting-info">
          <h4>{{ $t("smsReminder") }}</h4>
          <p>{{ $t("importantOperations") }}</p>
        </div>
        <label class="switch">
          <input type="checkbox" checked>
          <span class="slider"></span>
        </label>
      </div>
    </div>
  </div>
</template>

<style scoped>
.settings-content {
  background: var(--bgcolor);
  border-radius: 16px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
  padding: 40px;
  min-height: 500px;
  max-width: 1000px;
  margin-left: calc(50vw - 500px);
  color: var(--txcolor);
  border: 1px solid var(--border-color);
}

.content-header {
  margin-bottom: 30px;
}

.content-header h2 {
  font-size: 1.8rem;
  color: var(--header-color);
  margin-bottom: 10px;
}

.content-header p {
  color: var(--secondary-text);
  font-size: 1rem;
  max-width: 600px;
  line-height: 1.6;
}

.settings-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  border: 1px solid var(--border-color);
}

.settings-card h3 {
  font-size: 1.2rem;
  color: var(--header-color);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-card h3 i {
  color: var(--accent-color);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f1f5f9;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info h4 {
  font-size: 1rem;
  color: var(--h4-color);
  margin-bottom: 5px;
}

.setting-info p {
  font-size: 0.9rem;
  color: #64748b;
  max-width: 500px;
}

.custom-select-wrapper {
  position: relative;
  width: fit-content;
}

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 15px;
  padding-right: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: var(--select-color);
  color: var(--txcolor);
  font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.custom-select:hover {
  border-color: #cbd5e1;
}

.custom-select:focus {
  border-color: #4facfe;
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.2);
}

.select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--arrow-color);
  pointer-events: none;
  transition: color 0.2s;
}

.custom-select:hover + .select-arrow,
.custom-select:focus + .select-arrow {
  color: var(--arrow2-color);
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #3b82f6;
}

input:checked + .slider:before {
  transform: translateX(24px);
}
</style>